<template>
	<view class="tab-bar">
		<view class="inner">
			<view class="tab-bar-border"></view>
			<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item)">
				<image :src="selected === index ? item.selectedIconPath : item.iconPath" class="tab-cover-img"></image>
				<view :style="{color:selected === index ? selectedColor : color}" class="tab-cover-view">{{item.text}}</view>
				<view class="tab-bar-badge" v-if="item.badge && item.badge>0">{{item.badge>99?"···":item.badge}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			selected: {
				type: Number,
				default: 0
			}
		},

		data() {
			return {
				color: "#999999",
				selectedColor: "#00b7ee",
				list: [{
						"pagePath": "/pages/home/index",
						"iconPath": require('@/static/ComTabBar/home_a.png'),
						"selectedIconPath": require('@/static/ComTabBar/home_b.png'),
						"text": "首页",
					},
					{
						"pagePath": "/pages/home/finddoctor",
						"iconPath": require('@/static/ComTabBar/info_a.png'),
						"selectedIconPath": require('@/static/ComTabBar/info_b.png'),
						"text": "找医生" //医院信息 /pagesA/info/index
					},
					{
						"pagePath": "/pages/message/chatList",
						"iconPath": require('@/static/ComTabBar/im_a.png'),
						"selectedIconPath": require('@/static/ComTabBar/im_b.png'),
						"text": "消息",
						"badge": 0
					},
					{
						"pagePath": "/pages/my/index",
						"iconPath": require('@/static/ComTabBar/my_a.png'),
						"selectedIconPath": require('@/static/ComTabBar/my_b.png'),
						"text": "我的"
					}
				]
			};
		},
		beforeCreate() {
			//全局事件订阅，只要订阅了事件就可以收到值
            uni.$on("ComTabBarSetTabBarBadge",(rel)=>{
                console.log('我被全局通知了ComTabBar', rel)
                this.list[rel.index].badge = rel.text
            })
		},
		beforeMount(){ //挂载到实例上去之后调用
			this.$store.dispatch('updateTabbarBadge')
		},
		methods: {
			//跳转
			switchTab(e) {
				console.log('switchTab',e);
				uni.setStorageSync('ComTabBarOption', e.option || '');
				if(e.pagePath == '/pages/home/finddoctor'){
					uni.navigateTo({
						url:e.pagePath
					})
				}else{
					uni.switchTab({
						url:e.pagePath
					})
				}
			}
		}
	}
</script>

<style>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		/* height: 102rpx; */
		background: #fff;
		/* display: flex; */
		/* border-top: 1rpx solid #eeeeee; */
		box-shadow: 0 0 10rpx #ddd;
		z-index: 12;
		
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.inner{
		display: flex;
		height: 102rpx;
	}

	.tab-bar-border {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 0rpx;
	}

	.tab-bar-item {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		height: 102rpx;
		padding-top: 8rpx;
	}

	.tab-cover-img {
		display: block;
		width: 48rpx;
		height: 48rpx;
	}

	.tab-cover-view {
		font-size: 24rpx;
		/* line-height: 22rpx; */
		/* height: 30rpx; */
	}

	.tab-bar-item{
		position: relative;
	}
	.tab-bar-badge{
		position: absolute;
    	top: 6rpx;
    	left: 50%;
    	margin-left: 6rpx;
		background: red;
		border-radius: 50%;
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		font-size: 22rpx;
		color: #fff;
	}
</style>
